<!--
 * @Description:第四十章（vue3.3编译宏）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-23 12:47:47
-->
<template>

<div>
  <h2>我是child 子组件</h2>
  <div>
    <h3>演示props</h3>
    <span>{{ props.name }}</span>
  </div>
  <hr />
  <div>
    <h3>演示emit</h3>
    <el-button type="primary" @click="send">派发</el-button>
  </div>
  <hr />
  <div>
    <h3>演示defineSlots</h3>
    <ul>
      <li v-for="(item, index) in data">
        <slot :index="index" :item="item"></slot>
      </li>
    </ul>
  </div>
</div>

</template>
<script generic="T" setup lang="ts">

// 1. defineProps
// 普通的方式
// import type { PropType } from 'vue';
// defineProps({
//   name: {
//     type: Array as PropType<string[]>,
//     required: true
//   }
// })
// ts 的写法
// const props = defineProps<{
//   name: string[]
// }>()
// props.name
// VUE3.3 对 defineProps 的改进， 新增了泛型的支持，需要在script标签上加上generic="T"
const props = defineProps<{
  name: T[],
  data:T[]
}>()

// 2. defineEmits
// 普通的写法，定义一个数组
// const emit = defineEmits(['send'])
// ts的写法
// const emit = defineEmits<{
//   (event: string, name: string):void
// }>()
// VUE3.3 的改进 更加精简
const emit = defineEmits<{
  'send': [name: string]
}>()

const send = () => {
  emit('send', 'hello')
}

// 3. defineOptions
// VUE3.3 内置了defineOptions 不需要再去下载插件了
// 它里面的属性和optionAPI 一模一样的
// 常用于定义name
// defineOptions()

// 4. defineSlots 只有声明没有实现 没有任何参数 只能接收ts的类型
defineSlots<{
  default(props:{item:T, index:number}):void
}>()

</script>
<style scoped>

</style>
